<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clock {
            position: relative;
            width: 200px;
            height: 200px;
            border: 5px solid #000;
            border-radius: 50%;
            margin: 100px auto;
        }

        .clock div:nth-child(-n+6) {
            width: 6px;
            height: 200px;
            background-color: #aaa;
            position: absolute;
            left: 50%;
            margin-left: -3px;
        }

        .line1 {
            transform: rotate(30deg);
        }

        .line2 {
            transform: rotate(60deg);
        }

        .line3 {
            transform: rotate(90deg);
        }

        .line4 {
            transform: rotate(120deg);
        }

        .line5 {
            transform: rotate(150deg);
        }

        .line6 {
            transform: rotate(180deg);
        }

        /* 中心小圆点 */
        .cent {
            width: 20px;
            height: 20px;
            background-color: #000;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }

        /* 中心空白圆盘 */
        .cover {
            width: 180px;
            height: 180px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* 时针 */
        .hour {
            width: 6px;
            height: 50px;
            background-color: #000;
            position: absolute;
            left: 50%;
            top: 100px;
            margin-left: -3px;
            /* 添加动画 */
            transform-origin: top center;
            animation: clockrotate 43200s steps(43200) infinite;
        }

        /* 分针 */
        .minute {
            width: 6px;
            height: 60px;
            background-color: #555;
            position: absolute;
            left: 50%;
            top: 100px;
            margin-left: -3px;
            /* 添加动画 */
            transform-origin: top center;
            animation: clockrotate 3600s steps(3600) infinite;
            
        }

        .seconds {
            width: 4px;
            height: 70px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 100px;
            margin-left: -2px;
            /* 添加动画 */
            transform-origin: top center;
            --startAngle: 0;
            transform: rotate(var(--startAngle, 0deg));
            animation: clockrotate 60s steps(60) infinite;
        }

        /* 设置动画序列 */
        @keyframes clockrotate {
            form {}
            to {
                transform: rotate(calc(360deg + var(--startAngle, 0deg)));
            }

        }
    </style>
</head>

<body>
    <div class="clock">
        <div class="line1"></div>

        <div class="line2"></div>

        <div class="line3"></div>

        <div class="line4"></div>

        <div class="line5"></div>

        <div class="line6"></div>

        <div class="cent"></div>

        <div class="cover"></div>

        <div class="hour"></div>

        <div class="minute"></div>

        <div class="seconds"></div>
    </div>
    <script>
        let time = new Date();
        let seconds = time.getSeconds();
        document.querySelector('.seconds').style.setProperty('--startAngle', 180 + 6 * seconds + 'deg');
    </script>
</body>

</html>